<template>
  <div class="chart-box">
    <div id="mapChart" style="width: 100%; height: 500px"></div>
    <el-dialog
      :title="diaName"
      :visible.sync="dialogVisible"
      width="80%"
      @close="close"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
        v-if="type === 1"
        height="400"
      >
        <el-table-column prop="guardName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="guardCompany" label="安保公司">
        </el-table-column>
        <el-table-column prop="guardIdcard" label="身份证号"> </el-table-column>
        <el-table-column prop="guardCertificatePath" label="保安证">
          <template slot-scope="scope">
            <!-- <img :src="url + scope.row.guardCertificatePath" alt="" style="width:60px;height:40px"/> -->
            <el-image
              style="width: 60px; height: 40px"
              :src="url + scope.row.guardCertificatePath"
              :preview-src-list="srcList"
              v-if="scope.row.guardCertificatePath"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="guardNocrimePath" label="无犯罪记录">
          <template slot-scope="scope">
            <el-image
              :src="url + scope.row.guardNocrimePath"
              alt=""
              style="width: 60px; height: 40px"
              :preview-src-list="srcList1"
              v-if="scope.row.guardNocrimePath"
            ></el-image>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData1"
        style="width: 100%"
        v-else-if="type === 2"
        height="400"
      >
        <el-table-column prop="staffName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="schoolName" label="学校名称"> </el-table-column>
        <el-table-column prop="staffIdcard" label="身份证号"> </el-table-column>
        <el-table-column prop="staffPhonenumber" label="手机号">
        </el-table-column>
        <el-table-column prop="staffPost" label="岗位"> </el-table-column>
        <el-table-column prop="staffWorkAge" label="工作年龄" width="140">
        </el-table-column>
        <el-table-column
          prop="staffPhysicalCondition"
          label="身体状况"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="staffPoliticalExamine"
          label="政治审查"
          width="140"
        >
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData2"
        style="width: 100%"
        v-else-if="type === 3"
        height="400"
        @row-click="handelMap"
      >
        <el-table-column prop="lineName" label="线路"> </el-table-column>
        <el-table-column prop="sites" label="巡逻点位">
          <template slot-scope="scope" v-if="scope.row.sites.length">
            <span v-for="(item, index) in scope.row.sites" :key="item.id"
              >{{ item.siteName
              }}<span v-if="index != scope.row.sites.length - 1">,</span></span
            >
          </template>
        </el-table-column>
        <el-table-column prop="lineSites" label="时间段" width="180">
          <template slot-scope="scope" v-if="scope.row.lineSites.length">
            {{
              scope.row.lineSites[0].startTime +
              "-" +
              scope.row.lineSites[0].finishTime
            }}
          </template>
        </el-table-column>
        <el-table-column prop="lineType" label="线路类别" width="120">
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData3"
        style="width: 100%"
        v-else-if="type === 4"
        height="400"
        @row-click="handelDetail"
      >
        <el-table-column prop="date" label="巡查日期"> </el-table-column>
        <el-table-column prop="line" label="线路">
          <template slot-scope="scope" v-if="scope.row.line.lineName">
            {{ scope.row.line.lineName }}
          </template>
        </el-table-column>
        <el-table-column prop="group" label="安保小组">
          <template slot-scope="scope" v-if="scope.row.group">
            {{ scope.row.group.groupName }}
          </template>
        </el-table-column>
        <el-table-column prop="patrolStatus" label="巡查状态">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
          style="background: #083f79; color: #fff"
          >返 回</el-button
        >
      </span>

      <pagination
        v-if="type === 3"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getPatrolLine"
      />
      <pagination
        v-if="type === 4"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getPatrulhaDetail"
      />
    </el-dialog>

    <patrolRoutes
      v-if="dialogVisible1"
      :dialogVisible.sync="dialogVisible1"
      :patruldetail="patruldetail"
      :schoolName="schoolName"
      :lineName="lineName"
    />

    <lineMap
      v-if="dialogVisible2"
      :dialogVisible2.sync="dialogVisible2"
      :lineRowData="lineRowData"
    />
  </div>
</template>

<script>
import jiangbei from "@/assets/dp/jb.json";
import * as echarts from "echarts";
import patrolRoutes from "@/views/system/dp/patrolRoutes";
import lineMap from "@/views/system/dp/lineMap";
import {
  getSchoolList,
  getSchoolDetail,
  getGuard,
  getStaff,
  getPatrulhaLine,
  getPatrulhaDetail,
  getLinklist,
} from "@/api/patrol/dp.js";

export default {
  components: { patrolRoutes, lineMap },
  data() {
    return {
      chart: null,
      schoolList: [],
      detailMsg: null,
      dialogVisible: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      srcList: [],
      srcList1: [],
      url: process.env.VUE_APP_BASE_API,
      type: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolId: null,
      },
      total: 0,
      diaName: "",
      dialogVisible1: false,
      patruldetail: null,
      schoolName: null,
      lineName: null,
      dialogVisible2: false,
      lineRowData: null,
    };
  },
  created() {
    this.getSchoolList();
  },
  methods: {
    close() {
      this.queryParams.pageNum = 1;
    },
    getSchoolList() {
      getSchoolList().then((res) => {
        if (res.code === 200) {
          this.schoolList = res.data;
          this.schoolList.map((item) => {
            if (item.type === "九年一贯制学校") {
              item.type = "九年一贯制";
            }
          });
          this.initChart();
        }
      });
    },
    getGuard(id) {
      getGuard(id).then((res) => {
        this.type = 1;
        if (res.code === 200) {
          this.total = res.data.length;
          this.diaName = "安保人员" + this.total + "人";
          this.tableData = res.data;
          this.srcList = res.data.map((item) => {
            return this.url + item.guardCertificatePath;
          });
          this.srcList1 = res.data.map((item) => {
            return this.url + item.guardNocrimePath;
          });
        }
      });
    },
    getStaff(id) {
      getStaff(id).then((res) => {
        this.type = 2;
        if (res.code === 200) {
          this.total = res.data.length;
          this.diaName = "行政人员" + this.total + "人";
          this.tableData1 = res.data;
        }
      });
    },
    //巡查路线
    getPatrolLine() {
      getPatrulhaLine(this.queryParams).then((res) => {
        this.type = 3;
        if (res.code === 200) {
          this.total = res.total;
          this.diaName = "巡查路线" + this.total + "条";
          this.tableData2 = res.rows;
          this.tableData2.map((item) => {
            item.lineType === 0
              ? (item.lineType = "安保")
              : (item.lineType = "行政");
          });
        }
      });
    },
    //巡查记录
    getPatrulhaDetail() {
      getPatrulhaDetail(this.queryParams).then((res) => {
        this.type = 4;
        if (res.code === 200) {
          this.total = res.total;
          this.diaName = "巡查记录" + this.total + "条";
          this.tableData3 = res.rows;
          this.tableData3.map((item) => {
            switch (item.patrolStatus) {
              case 0:
                item.patrolStatus = "未开始巡查";
                break;
              case 1:
                if (
                  Date.parse(item.date) - 28800000 ==
                  Date.parse(new Date().toLocaleDateString())
                ) {
                  item.patrolStatus = "正在巡查";
                } else {
                  item.patrolStatus = "超期巡查";
                }
                break;
              default:
                item.patrolStatus = "结束巡查";
                break;
            }
          });
        }
      });
    },
    handelDetail(row, column, event) {
      this.getLinklist(row.id);
      this.schoolName = row.line.school.name;
      this.lineName = row.line.lineName;
    },
    getLinklist(id) {
      getLinklist(id).then((res) => {
        if (res.code === 200) {
          this.patruldetail = res.data;
          this.dialogVisible1 = true;
        }
      });
    },
    handelMap(row) {
      this.lineRowData = row;
      this.dialogVisible2 = true;
    },
    initChart() {
      var myChart = echarts.init(document.getElementById("mapChart"));

      var scatterData = [
        {
          name: "小学校",
          id: null,
          imgbg:
            "",
          img: "",
          data: [],
        },
        {
          name: "中学校",
          id: null,
          imgbg:
            "",
          img: "",
          data: [],
        },
        {
          name: "九年一贯制",
          id: null,
          imgbg:
            "",
          img: "",
          data: [],
        },
      ];
      let serData = [];
      this.schoolList.forEach(res=>{
        // 获取前两个字符和后两个字符
        const start = res.schoolName.slice(0, 2);
        const end = res.schoolName.slice(-2);
        // 计算中间部分长度并替换为*
        const middleLength = res.schoolName.length - 4;
        const middle = '*'.repeat(middleLength);
        res.schoolName = start + middle + end;
      })
      this.schoolList.map((item) => {
        if (item.type === "小学校") {
          scatterData[0].data.push({
            id: item.id,
            name: item.schoolName,
            value: item.coordinate.split(","),
          });
        } else if (item.type === "中学校") {
          scatterData[1].data.push({
            id: item.id,
            name: item.schoolName,
            value: item.coordinate.split(","),
          });
        } else {
          scatterData[2].data.push({
            id: item.id,
            name: item.schoolName,
            value: item.coordinate.split(","),
          });
        }
      });

      let serLineData = [];

      this.schoolList.map((item) => {
        item.coordinate = item.coordinate.split(",");
        serLineData.push({
          name: item.type,
          type: "lines",
          zlevel: 3,
          symbol: "circle",
          symbolSize: [5, 5],
          color: "#ff8003",
          opacity: 1,
          label: {
            show: true,
            padding: [10, 20],
            color: "#fff",
            backgroundColor: {
              image:
                "",
            },
            borderWidth: 1,
            borderRadius: 6,
            formatter(params) {
              if (params.name != "江北区") {
                return params.name;
              }
            },
            textStyle: {
              align: "center",
              lineHeight: 20,
            },
          },
          lineStyle: {
            type: "solid",
            color: "#fff",
            width: 0.5,
            opacity: 1,
          },
          data: [
            {
              name: item.schoolName,
              id: item.id,
              coords: [
                item.coordinate,
                [item.coordinate[0], String(Number(item.coordinate[1]) + 0.05)],
              ], // 线条位置[开始位置，结束位置]
            },
          ],
        });
      });

      // 散点图配置
      scatterData.forEach((item) => {
        serData.push({
          name: `${item.name}`,
          type: "effectScatter",
          coordinateSystem: "geo",
          effectType: "ripple",
          showEffectOn: "render",
          // 散点样式
          rippleEffect: {
            period: 1,
            scale: 2,
            brushType: "fill",
          },
          // 散点大小 自定义散点图片
          symbol: `image://${item.img}`,
          symbolSize: [20, 20],
          hoverAnimation: true,
          // 标志的样式
          itemStyle: {
            normal: {
              color: "red",
              shadowBlur: 10,
              shadowColor: "#333",
            },
          },
          label: {
            show: true,
            formatter: "{b|{b}}",
            position: "top",
            distance: -5,
            rich: {
              b: {
                color: "#fff",
                fontSize: 14,
                backgroundColor: {
                  image: item.imgbg,
                },
                height: 30,
                padding: 5,
              },
            },
          },
          // labelLine: {
          //   show: false,
          //   showAbove: true,
          //   smooth: true,
          //   lineStyle: {
          //     color: "#fff",
          //   },
          // },
          zlevel: 99,
          data: item.data,
        });
      });

      let index = -1;

      echarts.registerMap("jiangbei", jiangbei);

      function handelCel() {
        document.getElementsByClassName("tool")[0].style.display = "none";
      }

      const security = (type, id) => {
        this.dialogVisible = true;
        // this.type = type;
        handelCel();
        if (type === 1) {
          this.getStaff(id);
        } else if (type === 2) {
          this.getGuard(id);
        } else if (type === 3) {
          this.queryParams.schoolId = id;
          this.getPatrolLine();
        } else if (type === 4) {
          this.queryParams.schoolId = id;
          this.getPatrulhaDetail();
        }
      };

      window.security = security;

      window.handelCel = handelCel;

      var option = {
        legend: {
          show: true,
          left: "5%",
          top: "5%",
          orient: "vertical",
          itemHeight: 22, //修改icon图形大小
          itemWidth: 20, //修改icon图形大小
          itemGap: 20,
          padding: 15,
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
          },
          backgroundColor: "rgba(84, 123, 235, 0.26)",
          borderRadius: 5,
          inactiveColor: "#A1C2E7",
          selected: {
            小学校: true,
            中学校: false,
            九年一贯制: false,
          },
        },
        tooltip: {
          show: true,
          triggerOn: "click",
          backgroundColor: "transparent",
          borderColor: "transparent",
          // position: ["30%", "-30%"],
          extraCssText: 'z-index:3',
          alwaysShowContent: true,
          enterable: true,
          formatter: (params, ticket, callback) => {
            if (params.name != "江北区") {
              getSchoolDetail(params.data.id).then((res) => {
                if (res.code === 200) {
                  this.detailMsg = res.data;
                  const str = `
                                <div class="tool">
                          <div class="cel" onclick="handelCel()" style="pointer-events: auto">x</div>
                          <div class="title">
                            <span class="line"></span><span>${
                              params.name
                            }</span>
                          </div>
                          <div class="content">
                            <ul>
                              <li>
                                <div class="left">安全负责人：</div>
                                <div class="right">${
                                  this.detailMsg.personResponsibleForSafety
                                    ? this.detailMsg.personResponsibleForSafety
                                    : ""
                                }</div>
                              </li>
                              <li>
                                <div class="left">行政人员：</div>
                                <div class="right" onclick="security(1,${
                                  params.data.id
                                })" style="pointer-events: auto;cursor: pointer;">${
                    this.detailMsg.administrativeStaff
                  }</div>
                              </li>
                              <li>
                                <div class="left">安保人员：</div>
                                <div class="right" onclick="security(2,${
                                  params.data.id
                                })" style="pointer-events: auto;cursor: pointer;">${
                    this.detailMsg.securityPersonnel
                  }</div>
                              </li>
                              <li>
                                <div class="left">巡查记录：</div>
                                <div class="right" onclick="security(4,${
                                  params.data.id
                                })" style="pointer-events: auto;cursor: pointer;">${
                    this.detailMsg.inspectionRecords
                  }条</div>
                              </li>
                              <li>
                                <div class="left" " >巡查路线：</div>
                                <div class="right" onclick="security(3,${
                                  params.data.id
                                })" style="pointer-events: auto;cursor: pointer;">${
                    this.detailMsg.patrolTheLine
                  }条</div>
                              </li>
                            </ul>
                          </div>
                        </div>
                                `;
                  callback(ticket, str);
                }
              });
              return "loading";
            }
          },
        },
        geo: {
          map: "jiangbei",
          zoom: 1.1,
          roam: false,
          animationDurationUpdate: 0,
          aspectScale: 1.2,
          itemStyle: {
            normal: {
              areaColor: "#013C62",
              shadowColor: "#182f68",
              shadowOffsetX: 0,
              shadowOffsetY: 25,
            },
            emphasis: {
              areaColor: "#2AB8FF",
              borderWidth: 0,
              color: "green",
              label: {
                show: false,
              },
            },
          },
        },

        series: [
          {
            type: "map",
            aspectScale: 1.2,
            label: {
              show: false,
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                  fontSize: 16,
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#2ab8ff",
                borderWidth: 1.5,
                areaColor: "#12235c",
              },
              emphasis: {
                areaColor: "#2AB8FF",
                borderWidth: 0,
                color: "green",
              },
            },
            markLine: {},
            select: {
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#12235c",
              },
            },
            zoom: 1.1,
            roam: true,
            animationDurationUpdate: 0,
            map: "jiangbei", //使用
          },
          ...serData,
          // ...serLineData,
        ],
      };
      myChart.setOption(option);

      window.onresize = () => {
        myChart.resize();
      };
      myChart.on("georoam", function (params) {
        let option = myChart.getOption(); //获得option对象
        if (params.zoom != null && params.zoom != undefined) {
          //捕捉到缩放时
          option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
          option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        } else {
          //捕捉到拖曳时
          option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        }
        myChart.setOption(option); //设置option
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  background: #083f79;
  color: #fff;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-table::before {
  height: 0 !important;
}
.chart-box {
  position: absolute;
  top: 11%;
  width: 966px;
}
::v-deep .tool {
  width: 411px;
  height: 312px;
  background: url("~@/assets/dp/images/tooltip.png");
  background-size: 100% 100%;
  position: relative;
  padding-top: 19px;
  .cel {
    width: 20px;
    height: 20px;
    color: #4cd4ff;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 18px;
    cursor: pointer;
  }
  .title {
    background: url("~@/assets/dp/images/title-bg.png");
    background-size: 100% 100%;
    width: 385px;
    height: 48px;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-style: italic;
    color: #ffffff;
    display: flex;
    align-items: center;
    .line {
      display: inline-block;
      width: 9px;
      height: 47px;
      background: #4cd4ff;
      margin-right: 19px;
    }
  }
  .content {
    margin-left: 32px;
    margin-top: 20px;
    ul {
      li {
        margin-bottom: 10px;
        display: flex;
        .left {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #a1c2e7;
          margin-right: 20px;
          width: 110px;
          text-align: right;
        }
        .right {
          font-size: 22px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-style: italic;
          color: #f7fafd;
        }
      }
    }
  }
}
</style>
